<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  1. npm install echarts@5.1.2

  2. 在main.js 中引入 echarts
  import * as echarts from 'echarts'
  Vue.prototype.$echarts = echarts

  3.指定一个父盒子
  <div ref="myChart" :style="{ width: '300px', height: '300px' }"></div>

  4. 书写图表数据
  注意 let myChart = this.$echarts.init(this.$refs.myChart) 一定要先定义这个代码，指定一个盒子
  methods: {
  drawLine() {
  // this.$refs.myChart 通过 ref 引用dom元素
  let myChart = this.$echarts.init(this.$refs.myChart)
  // 绘制图表
  myChart.setOption({
  title: { text: '在Vue中使用echarts' },
  tooltip: {},
  xAxis: {
  data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
  {
  name: '销量',
  type: 'bar',
  data: [5, 20, 36, 10, 10, 20]
  }
  ]
  })
  }
  }

</body>

</html>